<template>
  <div id="app">
    <!-- 手机导航 -->
    <div class="phone-nav d-md-none">
      <nav class="navbar navbar-expand-md navbar-light">
        <div class="logo-box">
          <img src="./assets/images/logo.png" class="img-responsive mr-2" alt="">
          <span class="fs-19 color-212">华睿新媒体职业学校</span>
        </div>
        <div @click="isClick">
          <svg class="bi bi-list" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M2.5 11.5A.5.5 0 0 1 3 11h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4A.5.5 0 0 1 3 3h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
          </svg>
        </div>
      </nav>
      <!-- 导航盒子 -->
      <div class="right-nav p-3" :class="isClickNav ? 'show-menu' : 'd-none' ">
        <ul>
            <router-link :to="item.url" tag="li" v-for="(item, i) in navList" :key="i" class="p-3 fs-20" @click.native="isClick">{{item.text}}</router-link>
        </ul>
      </div>
    </div>

    <!-- 头部 -->
    <div class="container-fluid">
      <div class="top-box d-none d-md-block">
        <div class="header-box d-flex j-around a-center pt-3 pb-3">
        <div class="left-box d-flex a-center">
          <img src="./assets/images/logo.png" class="logo mr-3" alt />
          <span class="fs-48 color-212">华睿新媒体职业学校</span>
        </div>
        <div class="right-box fs-24">
          <div class="d-flex a-center">
            <img src="./assets/images/tel.png" class="mr-3" alt />
            <span class="color-yellow">咨询热线</span>
          </div>
          <p class="color-blue">024-62639888</p>
        </div>
      </div>
      <div class="nav-box pt-3 pb-3 d-flex j-center">
        <ul class="nav d-flex color-999">
          <li v-for="(item, i) in navList" :key="i" :class="i == current ? 'color-yellow' : '' ">
            <router-link tag="span" :to="item.url" @click.native="clickNav(item, i)">{{item.text}}</router-link>
          </li>
        </ul>
      </div>
      </div>
      <div class="swiper-box w-100">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, i) in bannerList" :key="i">
              <img :src="item" alt />
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <div class="d-none d-md-block">
        <div class="title-box pt-3 pb-3 color-white fs-18 d-flex j-around a-center ">
          <span>愿景：教育引领行业 发展改变未来 打造世界一流 建设万人名校</span>
          <div class="d-flex a-center">
            <input type="text" name id placeholder="请输入关键词" class="mr-3" />
            <img src="./assets/images/10.png" alt />
          </div>
        </div>
      </div>

      <router-view></router-view>


     
      <!-- 底部 -->
      <div class="footer-box color-ccc pt-5 pb-3  d-none d-md-block">
        <div class="row d-flex j-center">
          <div class="col-md-3 foot-left">
            <div class="d-flex a-center mb-2">
              <img src="./assets/images/logo.png" class="mr-2" alt />
              <span class="fs-34 color-ccc flex-1">华睿新媒体职业学校</span>
            </div>
            <p class="fs-14">
              辽宁华睿新媒体职业学校是经由辽宁华睿星辉教育集团、
              日本札幌国际大学、T-PLAN日本奖学金协会三方共同创立的全日制国际化新媒体职业学校。
            </p>
          </div>
          <div class="col-md-3 foot-middle">
            <p class="fs-16">网站栏目</p>
            <div class="type-box">
              <ul class="d-flex f-wrap">
                <li class="fs-14 pr-5 mb-4" v-for="(item, i) in navList" :key="i">
                  <router-link :to="item.url" tag="span" @clikc.native="clickNav(item, i)">> {{item.text}}</router-link>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-3 foot-right">
            <div class="info-item mb-4">
              <img src="./assets/images/29.png" class="mr-3" alt />
              <span class="fs-14">地址：辽宁省沈阳市沈北新区辉山大街176号（北校区）</span>
            </div>
            <div class="info-item mb-4">
              <img src="./assets/images/291.png" class="mr-3" alt />
              <span class="fs-14">电话：024-62639888</span>
            </div>
            <div class="info-item">
              <img src="./assets/images/29.png" class="mr-3" alt />
              <span class="fs-14">地址：辽宁省沈阳市于洪区沙岭街道文沙街银岭路（西校区）</span>
            </div>
          </div>
        </div>

        <!-- <hr />
        <div class="fs-12 color-ccc text-center">2020 © 沈阳智杰网络科技有限公司版权所有@辽ICP备25648975号</div> -->
      </div>
       <!-- 手机底部 -->
      <div class="phone-foot d-md-none p-3 color-white">
        <div class="phone-type fs-12 d-flex a-center j-around">
            <router-link v-for="(item, i) in navList" :key="i" :to="item.url" tag="span" @clikc.native="clickNav(item, i)">{{item.text == '网站首页'? '' : item.text}}</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";

export default {
  // 设置页面的title description keyWords 
  metaInfo: {
      title: '辽宁华睿新媒体职业学校', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      },
      {
        name: 'description',
        content: '辽宁华睿新媒体职业学校是经由辽宁华睿星辉教育集团、日本札幌国际大学、T-PLAN日本奖学金协会三方共同创立的全日制国际化新媒体职业学校。学校坐落于环境宜人，风景优美的辉山风景区，办学特色鲜明，实行准军事化封闭式管理模式，全面保证学生的学习、生活、就业质量。'
      }
      ],
      link: [
        {
           rel: 'asstes',
        }
      ]
    },
  data() {
    return {
      current: 0,
      isClickNav: false,
      navList: [
        { url: "/index", text: "网站首页" },
        { url: "/about", text: "关于我们" },
        { url: "/environment", text: "校园环境" },
        { url: "/major", text: "金牌专业" },
        { url: "/teacher", text: "专家讲师" },
        { url: "/recruit", text: "招生简章" },
        { url: "/contact", text: "联系我们" }
      ],
      bannerList: [
        require("./assets/images/banner.png"),
        require("./assets/images/banner1.jpg"),
        require("./assets/images/banner2.jpg")
      ]
    };
  },
  methods: {
    clickNav(item, index) {
      this.current = index;
    },
    isClick() {
      this.isClickNav = !this.isClickNav
    }
  },
  mounted() {
    new Swiper(".swiper-container", {
      autoplay: true, //可选选项，自动滑动
      loop: true,
      pagination: {
        el: ".swiper-pagination"
      }
    });
  }
};
</script>

<style lang="scss">
@import "./assets/scss/style.scss";

// 手机样式
@media screen and (max-width: 768px) {
  .navbar img {
    width: 1.375rem;
  }
  .swiper-pagination-bullet {
    width: 0.125rem !important;
    height: 0.125rem !important;
  }
  .swiper-pagination-bullet-active {
  width: 0.1875rem !important;
  background-color: #f78e00 !important;
  }
  .swiper-pagination-bullets {
    bottom: 0 !important;
  }
  .phone-foot {
    background: #333;
  }
  .right-nav {
    background: #fff;
    width: 17.375rem;
    height: 100vh;
    position: fixed;
    z-index: 999;
    top: 0;
    box-shadow:0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    right: -17.375rem;
    li {
      border-bottom: 1px solid #999;
    }
  }
  .show-menu {
    right: 0;
    transition: all 0.4s;
  }
}

// PC样式
.nav-box {
  background-color: map-get($colors, "f1f");
  ul li {
    padding: 0 20px;
    border-right: 1px solid #999;

    &:hover {
      cursor: pointer;
      color: map-get($colors, "yellow");
    }

    &:first-child {
      border-left: 1px solid #999;
    }
  }
}

.swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}

.swiper-pagination-bullet {
  background-color: #004b97 !important;
  opacity: 1 !important;
}

.swiper-pagination-bullet-active {
  width: 15px !important;
  background-color: #f78e00 !important;
}

.title-box {
  background: map-get($colors, "blue");
  input {
    width: 300px;
    height: 36px;
    font-size: 16px;
    padding-left: 10px;
  }
}

.footer-box {
  background: map-get($colors, "333");
  .foot-left {
    img {
      width: 46px;
    }
  }
  ul li {
    cursor: pointer;
  }
  hr {
    border: none;
    height: 1px;
    background-color: #707070;
    margin-bottom: 24px;
  }
  .foot-middle {
    padding-left: 40px;
  }
}


</style>